<template>
  <div class="fill-blank-editor">
    <el-dialog
      :visible.sync="visible"
      :close-on-click-modal="false"
      :title="!dataForm.id ? '新增' : '修改'"
    >
      <el-form :model="dataForm" :rules="dataFormRules" ref="fillBlankDataForm" label-width="80px">
        <!-- 分类选项 -->
        <el-form-item prop="cateId" label="分类">
          <el-select v-model="dataForm.cateId" filterable clearable>
            <el-option
              v-for="cate in examCateList"
              :key="cate.id"
              :label="cate.name"
              :value="cate.id"
            />
          </el-select>
        </el-form-item>
        <!-- 题干 -->
        <el-form-item prop="info" label="题干">
          <ck-editor ref="ckEditor" :change="contentChanged"/>
        </el-form-item>
        <!-- 选项 -->
        <el-form-item prop="answ" label="答案">
          <div>请填写每个填空题的答案
            <el-tooltip placement="top" effect="light">
              <div slot="content"><span style="color: #1A8CFE">同义词</span><br/>同义词是答案的关键信息，填写后，<br />系统根据同义词进行判分。
                <span style="color: #1A8CFE">一个答案<br />有不同的答法，可根据多个同义词，<br />满足其一即可得分。</span>(如: china 和  CHINA)</div>
              <i class="el-icon-s-promotion" style="margin-left: 10px"/>
            </el-tooltip>
          </div>
          <div class="blank-container" v-for="(blank, index) in blankList" :key="index">
            <span class="answer-index">第{{index + 1}}空.</span>
            <el-tag
              class="answer-item"
              v-for="(text, childIndex) in blank"
              :key="childIndex"
              closable
              @close="removeBlankText(index, childIndex)"
            >{{text}}
            </el-tag>
              <el-input
                class="answer-input"
                v-model="blankTextList[index]"
                @keyup.native.enter="addBlankText(index)"
                @blur="addBlankText(index)"
                placeholder="请输入同义答案"
                style="width:100px"
              />
            <i class="el-icon-delete" v-if="blankList.length > 1"
               style="margin-left: 10px" @click="removeblankList(index)"/>
          </div>
          <el-button @click="addBlank()" type="primary">添加填空答案</el-button>
        </el-form-item>
        <el-form-item label="答案乱序" prop="answDisorder">
<!--          <el-radio-group v-model="dataForm.answDisorder">-->
<!--            <el-radio :label="0">不乱序</el-radio>-->
<!--            <el-radio :label="1">乱序</el-radio>-->
<!--          </el-radio-group>-->
          <el-switch
            v-model="dataForm.answDisorder"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </el-form-item>
        <!-- 试题难度 -->
        <el-form-item label="试题难度" prop="level">
          <el-radio-group v-model="dataForm.level">
            <el-radio :label="0">简单</el-radio>
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 答案解析 -->
        <el-form-item label="答案解析" prop="analysis">
          <el-input type="textarea" v-model="dataForm.analysis" placeholder="答案解析"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="close()">取消</el-button>
        <el-button @click="save()" type="primary">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import CkEditor from '../../../components/ckEditor/ckEditor'

  export default {
    components: {CkEditor},
    data() {
      return {
        visible: false,
        dataForm: {
          id: '',
          cateId: '',
          info: '',
          answ: '',
          analysis: '',
          level: 0,
          answDisorder: 0,
          quesType: 4
        },
        dataFormRules: {
          info: [{required: true, message: '内容不能为空', trigger: 'blur'}],
          cateId: [{required: true, message: '分类不能为空', trigger: 'blur'}],
          answ: [{required: true, message: '答案不能为空', trigger: 'blur'}],
          level: [{required: true, message: '试题难度不能为空', trigger: 'blur'}]
        },
        examCateList: [],
        blankList: [],
        blankTextList: []
      }
    },
    methods: {
      open(id) {
        this.blankList = []
        this.dataForm.id = id
        this.visible = true
        if (id) {
          this.fillblankInfo()
        } else {
          this.$nextTick(() => {
            this.$refs.fillBlankDataForm.resetFields()
            this.$refs.ckEditor.setData(this.dataForm.info)
          })
          // this.$refs.ckEditor.setData(this.dataForm.info)
        }
      },
      close() {
        this.visible = false
      },
      async fillblankInfo() {
        let res = await this.$http.post(`/exam-admin/ques/fillblacks/info/${this.dataForm.id}`)
        this.$refs.ckEditor.setData(res.data.info)
        this.dataForm.id = res.data.id
        this.dataForm.cateId = res.data.cateId
        this.dataForm.info = res.data.info
        this.dataForm.answ = res.data.answ
        this.dataForm.analysis = res.data.analysis
        this.dataForm.level = res.data.level
        this.dataForm.answDisorder = res.data.answDisorder
        this.blankList = JSON.parse(res.data.answ)
        console.log(this.blankList)
      },
      contentChanged(val) {
        this.dataForm.info = val
      },
      async loadExamCateList() {
        let res = await this.$http.post('/exam-admin/ques/cate/tree')
        res.data.forEach(item => delete item.children)
        this.examCateList = res.data
      },
      addBlankText(index) {
        let text = this.blankTextList[index]
        if (text !== '' && text !== undefined) {
          this.blankList[index].push(text)
        }
        this.blankTextList[index] = ''
      },
      removeBlankText(index, childIndex) {
        this.blankList[index].splice(childIndex, 1)
      },
      removeblankList(index) {
        this.blankList.splice(index, 1)
      },
      addBlank() {
        this.blankList.push([])
      },
      async save() {
        var url = ''
        if (this.dataForm.id) {
          url = '/exam-admin/ques/fillblacks/update'
        } else {
          url = '/exam-admin/ques/fillblacks/save'
        }
        var isvalid = await this.$refs.fillBlankDataForm.validate()
        if (isvalid) {
          let res = await this.$http.post(url, this.dataForm)
          console.log(this.dataForm)
          if (res.code === 200) {
            this.$notify.success({title: '成功', message: '保存成功'})
            this.$emit('refreshDataList')
            this.visible = false
          } else {
            this.$notify.error({title: '失败', message: res.msg})
          }
        }
      }
    },
    created() {
      this.loadExamCateList()
    },
    watch: {
      blankList(val) {
        this.dataForm.answ = JSON.stringify(val)
      }
    }
  }
</script>

<style lang="less" scoped>
  .blank-container {
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 3px;

    .answer-index {
      margin-right: 20px;
    }

    .answer-item {
      margin-right: 20px;
    }
  }
</style>
